CSS enhancements

use on: horizontal nice-menu with sub-menus animated down and out

css code for a very nice and enhanced implementation of nice-menu with a lot of enhanced features such as:

• location aware navigation(the top lvl item will stay highlighted even when child items are the active page)
• nicely differentiated top lvl items
• all works using no modification of original mod files and all cross browser

include this file manually in your theme.info (stylesheets[all][] = custom-menu.css) or from a block but when i use the nice-menu css override option under themes > global settings, it doesn't work. i haven't dug into why because i'm developing a new theme and want to use the theme.info file to include a customization css.

anyhow, it's a very nice menu. enjoy (and enhance!).

#nav {
	font-family: Verdana, Arial, Sans-serif;
	margin: 0 0 0 0;
	border-left:1px solid #31baea;
	border-right:1px solid #31baea;
	padding:4px 5px;
	font-size: 1em;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:normal;
	background: #31baea;
	}
	
	/*default nice-menu overrides*/
		#nav ul li {
			/*overrides a default style*/
			padding-bottom:0;
			}
		ul.nice-menu a,
		ul.nice-menu a:link,
		ul.nice-menu a:visited,
		ul.nice-menu a:hover, 
		ul.nice-menu a:active {
			/*overrides a default style*/
			text-decoration:none;
			}
		
		ul.nice-menu,
		ul.nice-menu ul,
		ul.nice-menu li {
			 /*
			gets rid of all background images and borders 
			sort of a reset so that you can create custom ones below
			*/
			border: 0;
			background-color: #dfdfdf; /*added to override default*/
			}
	/* end default nice-menu overrides */


  
  
	/* top level customizations */
		ul.nice-menu>li>a {
			/*sets layout for top level*/
			background: #5fc4e9;
			color: #069;		
			line-height:3em;
			text-decoration: none;
			padding-left:1.5em;
			padding-right:1.5em;
			}
		
		ul.nice-menu>li>a:link,
		ul.nice-menu>li>a:visited {
			/*sets style for top level*/
			background: #5fc4e9;
			color: #069;
			}
		
		ul.nice-menu>li>a:hover,
		ul.nice-menu>li>a:active {
			/*sets style for top level*/
			background: #dfdfdf;
			color: #069;
			}
		ul.nice-menu>li>a.active,
		ul.nice-menu>li.active-trail>a {
			/*sets layout for active top level item */
			background: #31baea;
			color: #fff;
			}
	
	
		ul.nice-menu>li.sfHover>a,
		ul.nice-menu>li.sfHover>a:link,
		ul.nice-menu>li.sfHover>a:visited,
		ul.nice-menu>li.sfHover>a:hover,
		ul.nice-menu>li.sfHover>a:active{ 
			background: #dfdfdf;
			color:#069;
			}				
			
	/* end 1st lvl section */ 
  
  
	
	
	/*2nd lvl customizations*/
		ul.nice-menu li.menuparent ul li {
			/*adds bottom border to all at 2nd level and lower*/
			/*border-bottom:1px dotted #CCCCCC;*/
			}
		ul.nice-menu ul li {
			/*width of submenus*/
			width:15em;
			border-bottom:1px dotted #CCCCCC;
			}
			
		ul.nice-menu ul {
			/* sets default background for 2nd lvl and lower items */
			background: #dfdfdf;				
			padding: .5em 1.5em;
			font-size:.9em;
			line-height:2em;
			}
			
		ul.nice-menu>li>ul {
			/*
			moves position of 2nd level menus down a bit 
			becuse of large height of 1st lvl menus 
			*/
			top: 3.4em;	
			}
			
		
		ul.nice-menu ul li a,
		ul.nice-menu ul li a:link,
		ul.nice-menu ul li a:hover,
		ul.nice-menu ul li a:visited,
		ul.nice-menu ul li a:active, {
			text-decoration: none;
			color: #069;
			background:#dfdfdf;
			}
			
		ul.nice-menu ul li a:hover,
		ul.nice-menu ul li a:active {
			text-decoration: none;
			color: #fff;
			background:#31baea;
			}
			
		ul.nice-menu ul li.menuparent>a{
			background: #dfdfdf;
			color:#069;
			}
		ul.nice-menu ul li.menuparent.sfHover>a,
		ul.nice-menu ul li.menuparent.active-trail>a,
		ul.nice-menu ul li a.active{
			background: #31baea;
			color: #fff;
			}
	
			ul.nice-menu>li>ul li ul {
			/*
			moves position of 2nd level menus down a bit 
			becuse of large height of 1st lvl menus 
			*/
			top: 1.5em;	
			left: 15em;
			}
	/* end 2nd lvl section */

	.sf-sub-indicator {
		font-size:.9em;
		margin: 0 0 0 .5em;
		padding: 0;
		}